<template>
	<view class="content">
		<global-notify ref="globalNotify"></global-notify>
		<!-- <u-notify top="0" ref="consultantNotify" message="globalMessage"></u-notify> -->
		<view style="flex-grow: 1;">
			<u-empty customStyle="height: 100%" v-if="tabs.length == 0" mode="search"></u-empty>
			<template v-else>
				<z-paging :fixed='false' autoShowBackToTop show-refresher-update-time ref="paging" :auto="false"
					v-model="dataList" @query="queryList">
					<u-sticky style="top: 0">
						<view v-if="tabs.length > 1" class="topTab">
							<u-tabs :scrollable='false' style="width: 100%;" :list="tabs" @click="changeTag"></u-tabs>
						</view>
						<view style="padding: 5px;" v-if="selectTab.value == 'MC' && subOptions.length > 1">
							<u-subsection mode='subsection' :current="currentStatus" @change='changeStatus'
								:list="subOptions"></u-subsection>
						</view>
					</u-sticky>

					<!-- 自定义返回顶部view -->
					<template #backToTop>
						<self-back-to-top ref="backToTop" :current="currentNo" :total="total" />
					</template>

					<template v-if="selectTab.value == 'IM'">
						<view class="listItem" v-for="(item,index) in dataList" :key="index">
							<view class="flex">
								<view style="flex-grow: 1;">
									<view class="listItemName">
										<view class="flex">
											{{item.consultationTypeLabel}}
											<view class="mL6">
												<u-tag :text="distributionTypes[item.distributionType] || '--'" size="mini"></u-tag>
											</view>
										</view>
									</view>
									<view class="listItemInfo">
										<view class="listItemInfoLabel">发起时间：</view>
										<view class="listItemInfoValue">{{item.whenCreated}}</view>
									</view>
									<!-- <view class="listItemInfo">
						<view class="listItemInfoLabel">接入时间：</view>
						<view class="listItemInfoValue">{{item.acceptTime}}</view>
					</view>
					<view class="listItemInfo">
						<view class="listItemInfoLabel">结束时间：</view>
						<view class="listItemInfoValue">{{item.closeTime}}</view>
					</view> -->
									<view class="listItemInfo">
										<view class="listItemInfoLabel">咨询内容：</view>
										<view class="listItemInfoValue">
											{{item.question}}
										</view>
									</view>
								</view>
								<view class="listItemExt">

									<u-avatar :size='36' :src="item.userInfo? (item.userInfo.avatar || defaltAva):defaltAva"></u-avatar>
									<view class="listItemExtLabel">{{item.lawyerName}}</view>
									<view>
										<u-icon name="bell-fill" :color="item.imHealthLevel == 'normal' ? '#19be6b' : '#ed4014'"></u-icon>
									</view>
								</view>
							</view>
							<u-divider text="分割线" :dot="true"></u-divider>
							<view class="listItemBtns">
								<u-button @click="viewDetail(item)" size='small' customStyle="margin: 0 5px; flex: 1"
									type="primary">详情</u-button>
								<view v-if="(item.userIds || []).indexOf($commonData.imUserId()) >= 0"
									:class="newMsgMap[item.groupId]&&newMsgMap[item.groupId]>0?'newMsg':''" style="margin: 0 5px; flex: 1; position: relative;">
									<u-button @click="viewIMDetail(item)" size='small' 
										type="success">接进</u-button>
										 <u-badge :customStyle="{position: 'absolute',right: '-5px',top: '-5px'}" type="error" max="99" :value="newMsgMap[item.groupId]?newMsgMap[item.groupId]:0"></u-badge>
								</view>
								<!-- //是律师管理员且当前不是自己的案件 -->
								<u-button v-if='hasLawyerM && (item.userIds || []).indexOf($commonData.imUserId()) < 0'
									@click="interpose(item)" size='small' customStyle="margin: 0 5px; flex: 1" type="warning">介入</u-button>
							</view>
						</view>
					</template>

					<template v-else-if="selectTab.value == 'MC'">
						<view class="listItem" v-for="(item,index) in dataList" :key="index">
							<view class="listItemName">
								<view class="flex">
									{{item.commentTypeLabel || '--'}}
								</view>
							</view>
							<view class="listItemInfo">
								<view class="listItemInfoLabel">咨询编号：</view>
								<view class="listItemInfoValue">{{item.code}}</view>
							</view>
							<view class="listItemInfo">
								<view class="listItemInfoLabel">发起时间：</view>
								<view class="listItemInfoValue">{{item.whenCreated}}</view>
							</view>
							<view class="listItemInfo">
								<view class="listItemInfoLabel">咨询标题：</view>
								<view class="listItemInfoValue">{{item.commentTitle}}</view>
							</view>

							<view class="listItemInfo">
								<view class="listItemInfoLabel">咨询内容：</view>
								<view class="listItemInfoValue">
									{{item.commentInfo}}
								</view>
							</view>
							<u-divider text="分割线" :dot="true"></u-divider>
							<view class="listItemBtns">
								<u-button @click="viewDetail(item)" size='small' customStyle="margin: 0 5px"
									type="primary">详情</u-button>
								<u-button v-if="currentStatus == 0" @click="reply(item)" size='small' customStyle="margin: 0 5px"
									type="warning">回复</u-button>
								<u-button v-if="currentStatus == 1" @click="audit(item)" size='small' customStyle="margin: 0 5px"
									type="warning">审核</u-button>
							</view>

						</view>
					</template>
				</z-paging>

				<view v-if="canGrabbing" class="grabbingBtn" @click="{showGrabbing= true}">
					<view class="grabbingBtnContent">
						<u-badge customStyle="width: max-content; position: absolute;right: 10px;top: 0;" numberType="limit"
							shape="horn" type="warning" max="99" :value="grabbingNum"></u-badge>
						<view>去抢单</view>
					</view>
				</view>

				<u-popup :customStyle="'width:70vw'" :show="showGrabbing" mode="right" @close="closeGrabbing"
					@open="openGrabbing">
					<view>
						<template v-if="this.systemRoles.indexOf('LAWYER_IM') >= 0 || this.$commonData.isAdmin()">
							<u-divider orientation="left" text="即时咨询"></u-divider>
							<view class="orderItemContainer" v-if="imList && imList.length > 0">
								<view :key="item.id" class="orderItem" v-for="item in imList">
									<view>
										咨询类型：{{item.consultationTypeLabel}}
									</view>
									<view>咨询时间： {{item.whenCreated}}</view>
									<view>咨询内容： {{item.question}}</view>
									<view style="color: red" v-if="item.testData">系统测试件，请勿抢单</view>
									<u-button size='mini' @click="grabbingConsultation(item)" class="orderBtn" type="error">抢单</u-button>
								</view>
							</view>
							<u-empty mode='data' v-else text="暂无数据"></u-empty>
						</template>
					</view>
				</u-popup>

				<u-action-sheet :round='10' :show="showDetailModal" title="咨询详情" @close="()=>{showDetailModal=false;}">
					<slot>
						<view v-if="showDetailModal"
							style="background-color: #F3F5F9; width: 100%;text-align: left; max-height: 60vh; overflow-y: auto;">
							<mcDetail v-if="selectTab.value == 'MC'" :consultant='current' />
							<imDetail v-else-if="selectTab.value == 'IM'" :consultant='current' />
						</view>
					</slot>
				</u-action-sheet>

				<!-- 回复 -->
				<u-modal :show="showReplyModal" showCancelButton :title="`回复 ${current.commentTitle} `"
					@cancel="()=>{showReplyModal=false}" @confirm="confirmReply">
					<slot>
						<view style="width: 100%;text-align: left;">
							<u--form :borderBottom='true' :error-type="'message'" labelPosition="left" labelWidth='70'
								:model="replyForm" :rules="rulesReplyForm" ref="replyForm">
								<u-form-item label="回复结果" prop="replyStatus">
									<u-radio-group v-model="replyForm.replyStatus">
										<u-radio label="提交审核" name="TO_AUDIT">
										</u-radio>
										<u-radio :customStyle="{marginLeft: '8px'}" label="提交隔离" name="TO_ISOLATION">
										</u-radio>
									</u-radio-group>
								</u-form-item>
								<u-form-item :borderBottom='true' label="回复内容" prop="replyInfo">
									<u--textarea placeholder="请输入回复内容" count v-model="replyForm.replyInfo"></u--textarea>
								</u-form-item>
							</u--form>
						</view>
					</slot>
				</u-modal>
				<!-- 审核 -->
				<u-modal :show="showAuditModal" showCancelButton :title="`审核 ${current.commentTitle} `"
					@cancel="()=>{showAuditModal=false}" @confirm="confirmAudit">
					<slot>
						<view style="width: 100%;text-align: left;">
							<u--form :borderBottom='true' :error-type="'message'" labelPosition="left" labelWidth='70'
								:model="auditForm" :rules="rulesAuditForm" ref="auditForm">
								<u-form-item label="审核结果" prop="auditStatus">
									<u-radio-group v-model="auditForm.auditStatus">
										<u-radio v-if="current.consultationReply && current.consultationReply.replyStatus == 'TO_AUDIT'"
											label="通过" name="APPROVED">
										</u-radio>
										<u-radio :customStyle="{marginLeft: '8px'}" label="驳回" name="REFUSED">
										</u-radio>
										<u-radio :customStyle="{marginLeft: '8px'}" label="隔离" name="ISOLATION">
										</u-radio>
									</u-radio-group>
								</u-form-item>
								<u-form-item :borderBottom='true' label="审核意见" prop="auditInfo">
									<u--textarea placeholder="请输入审核意见" count v-model="auditForm.auditInfo"></u--textarea>
								</u-form-item>
							</u--form>
						</view>
					</slot>
				</u-modal>
				<!-- 介入咨询 -->
				<u-modal :show="showInterpose" showCancelButton title="介入咨询" @cancel="cancelInterpose"
					@confirm="confirmInterpose">
					<slot>
						<view style="width: 100%;text-align: left;">
							<u--form :borderBottom='true' :error-type="'message'" labelPosition="left" labelWidth='70'
								:model="interposeForm" :rules="rulesInterposeForm" ref="interposeForm">
								<u-form-item label="介入方式" prop="interposeType">
									<u-radio-group v-model="interposeForm.interposeType" @change=''>
										<u-radio label="直接介入" name="self">
										</u-radio>

										<u-radio :customStyle="{marginLeft: '8px'}" label="指派律师" name="assign">
										</u-radio>
									</u-radio-group>
								</u-form-item>

								<u-form-item label="介入律师" @click="()=>{showLawyers = true; hideK()}" prop="interposeName"
									v-if="interposeForm.interposeType == 'assign'">
									<u--input v-model="interposeForm.interposeName" disabled disabledColor="#ffffff" placeholder="请选择"
										border="none"></u--input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<!-- 
						  <Select v-model="interposeForm.interposeAccount">
						    <template v-for="assignLawyer in assignLawyers">
						      <Option
						        :key="assignLawyer.id+'-assignLawyer'"
						        :label="assignLawyer.name"
						        :value="assignLawyer.userAccount"
						        v-if="currentGroup.userIds.indexOf(assignLawyer.userIMId) < 0"
						      >
						        <div class="flex" style="align-items: center;">
						          <div>{{assignLawyer.name}}</div>
						          <div class="textR">
						            <Tag>当前接入：{{assignLawyer.inServiceNum}}</Tag>
						          </div>
						        </div>
						      </Option>
						    </template>
						  </Select> -->
							</u--form>
							<u-action-sheet @close='showLawyers=false' @select="selectClick" :round='10' :actions="assignLawyers"
								title="指派介入律师" :show="showLawyers"></u-action-sheet>
						</view>
					</slot>
				</u-modal>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		clearStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js'
	import mcDetail from './mcDetail.vue';
	import imDetail from './imDetail.vue';
	export default {
		components: {
			mcDetail,
			imDetail
		},
		data() {
			return {
				imList: [],
				showGrabbing: false,
				lastMessageUId: '',
				showLawyers: false,
				defaltAva: require('@/static/images/avatar.png'),
				distributionTypes: {
					system: '系统派单',
					appoint: "管理员指派",
					proac: "律师抢单"
				},
				tabs: [],
				selectTab: {},
				dataList: [],
				icTypes: [],
				systemRoles: [],
				currentNo: 0,
				total: 0,
				searchKey: '',
				currentStatus: 0,
				showDetailModal: false,
				current: {},
				showReplyModal: false,
				replyForm: {
					replyStatus: '',
					replyInfo: ''
				},
				rulesReplyForm: {
					replyStatus: [{
						type: 'string',
						required: true,
						message: '请选择回复结果',
						trigger: ['change']
					}],
					replyInfo: [{
						type: 'string',
						min: 0,
						max: 255,
						required: true,
						message: '请输入回复内容',
						trigger: ['blur', 'change']
					}]
				},
				showAuditModal: false,
				auditForm: {
					auditStatus: '',
					auditInfo: ''
				},
				rulesAuditForm: {
					auditStatus: [{
						type: 'string',
						required: true,
						message: '请选择审核结果',
						trigger: ['change']
					}],
					auditInfo: [{
						type: 'string',
						min: 0,
						max: 255,
						required: true,
						message: '请输入审核内容',
						trigger: ['blur', 'change']
					}]
				},
				showInterpose: false,
				assignLawyers: [],
				interposeForm: {
					interposeType: '',
					interposeAccount: ''
				},
				rulesInterposeForm: {
					interposeType: [{
						type: 'string',
						required: true,
						message: '请选择介入类型',
						trigger: ['change']
					}],
					interposeAccount: [{
						type: 'string',
						required: true,
						message: '请选择介入律师',
						trigger: ['change']
					}],
					interposeName: [{
						type: 'string',
						required: true,
						message: '请选择介入律师',
						trigger: ['change']
					}],
				},
				newMsgMap: {}
			};
		},
		computed: {
			grabbingNum: function() {
				return (this.imList || []).length
			},
			hasOperationRole: function() {
				return (this.systemRoles || []).indexOf('OPERATION_MANAGER') >= 0 || (this.systemRoles || []).indexOf(
					'OPERATION') >= 0
			},
			hasLawyerM: function() {
				return (this.systemRoles || []).indexOf('LAWYER_MANAGER') >= 0
			},
			subOptions: function() {
				if (this.isAdmin || this.hasOperationRole) {
					return [{
						name: '待回复',
						value: 'reply'
					}, {
						name: '待审核',
						value: 'audit'
					}]
				} else {
					if (this.selectTab.value == 'IM') {
						return [{
							name: '服务中',
							value: 'in_service'
						}]
					} else {
						return [{
							name: '待回复',
							value: 'reply'
						}]
					}
				}
			},
			canGrabbing: function() {
				//只有律师及admin管理员能抢单
				return (this.systemRoles || []).indexOf('LAWYER_IM') >= 0 || this.$commonData.isAdmin()
			}
		},
		methods: {
			getIMList: function() {
				console.log('getIMList with ', this.canGrabbing)
				if (this.canGrabbing) {
					this.$api.getWaitingList().then(res => {
						if (res.success) {
							this.imList = res.result?.data || []
						} else {
							toast(res.message)
						}
					}).catch(function(err) {
						console.log(err)
					})
				}
			},
			grabbingConsultation: function(item) {
				this.$api.grabbingConsultation({
					'consultationId': item.id
				}).then(res => {
					if (res.success) {
						toast("抢单成功！")
						this.showGrabbing = false
						if (this.selectTab.value == 'IM') {
							this.$refs.paging.reload(true);
						}
						this.viewIMDetail(item)
					} else {
						toast(res.message)
					}
				}).catch(function(err) {
					console.log('grabbingConsultation error', err)
					toast("抢单失败！")
				}).finally(() => {
					this.getIMList()
				})
			},
			closeGrabbing: function() {
				this.showGrabbing = false
			},
			openGrabbing: function() {
				this.showGrabbing = true
			},
			initData: function() {
				
				this.dataList = []
				Promise.all([this.getICTypes(), this.getSystemRoles()]).then(val => {
					this.tabs = this.icTypes.filter(icType => {
						return icType.isOpen && ((icType.value == 'IM' && this.hasLawyerM) || (this.systemRoles || [])
							.indexOf(
								icType.systemRole) >= 0 || this
							.hasOperationRole || this.$commonData.isAdmin())
					}).map(icType => {
						return {
							name: icType.label,
							value: icType.value
						}
					})
					if (this.tabs.length > 0) {
						this.selectTab = this.tabs[0]
						this.$nextTick(() => {
							this.$refs.paging.reload(true);
						})
						this.getIMList()
					}
				})
			},
			changeTag: function(item) {
				console.log('changeTag', item)
				this.selectTab = Object.assign({}, item)
				this.currentStatus = 0
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
				this.$refs.paging.reload(true);
			},
			changeStatus: function(ind) {
				console.log('changeStatus', ind)
				this.currentStatus = ind
				this.$refs.paging.reload(true);
			},
			getStatus: function(item) {
				let status = {}
				switch (item.commentStatus) {
					case "APPROVED":
						status = {
							label: "审核通过",
							type: "success"
						}
						break
					case "TO_BE_REVIEWED":
						status = {
							label: "待审核",
							type: "warning"
						}
						break
					case "ISOLATION":
						status = {
							label: "审核隔离",
							type: "error"
						}
						break
				}
				return status
			},
			getICTypes: async function() {
				this.icTypes = await this.$commonData.getICTypes()
			},
			getSystemRoles: async function() {
				this.systemRoles = await this.$commonData.getSystemRoles()
			},

			queryList(pageNo, pageSize) {
				let that = this
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					status: this.subOptions[this.currentStatus].value,
					icType: this.selectTab.value,
					searchKey: this.searchKey
				}
				this.$api.consultationList(params).then(res => {
					if (res.success) {
						let result = res.result || {}
						this.currentNo = pageNo
						this.total = result.maxPage || 0
						// 将请求的结果数组传递给z-paging
						this.$refs.paging.complete(result.data || []);
					} else {
						// 将请求的结果数组传递给z-paging
						toast(res.message)
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				}).finally(() => {
					if(that.selectTab.value == 'IM'){
						let map = uni.getStorageSync('newMsgMap') || {}
						that.newMsgMap = {}
						console.log('map', map)
						Object.keys(map).forEach(key => {
							that.$set(that.newMsgMap, key, map[key] || 0)
						})
						console.log('this.newMsgMap', that.newMsgMap)
					}
				})
			},

			viewDetail(item) {
				this.current = item
				this.showDetailModal = true
			},
			reply(item) {
				this.current = item
				this.replyForm = {
					replyStatus: '',
					replyInfo: ''
				}
				this.showReplyModal = true
				this.$nextTick(() => {
					this.$refs.replyForm.setRules(this.rulesReplyForm)
				})
			},
			confirmReply() {
				let that = this
				this.$refs.replyForm.validate().then(async res => {
					if (res) {
						console.debug("replyForm valid", res)
						this.replyForm.consultationId = this.current.id
						this.replyForm.consultationVersion = this.current.version
						this.$api.reply(this.replyForm).then(res => {
							if (res.success) {
								toast("回复成功！")
								this.$refs.paging.reload(true);
							} else {
								toast(res.message)
							}
						}).catch(err => {
							console.log("logout error", err)
							toast("回复失败！")
						}).finally(() => {
							that.showReplyModal = false
						})
					} else {
						console.log('验证失败');
					}
				}).catch(e => {
					//TODO handle the exception
					console.error("replyForm validate error", e)
				})
			},
			audit(item) {
				this.current = item
				this.auditForm = {
					auditStatus: '',
					auditInfo: ''
				}
				this.showAuditModal = true
				this.$nextTick(() => {
					this.$refs.auditForm.setRules(this.rulesAuditForm)
				})
			},
			confirmAudit() {
				let that = this
				this.$refs.auditForm.validate().then(async res => {
					if (res) {
						console.debug("auditForm valid", res)
						this.auditForm.consultationId = this.current.id
						this.auditForm.consultationVersion = this.current.version
						this.$api.audit(this.auditForm).then(res => {
							if (res.success) {
								toast("审核成功！")
								this.$refs.paging.reload(true);
							} else {
								toast(res.message)
							}
						}).catch(err => {
							console.log("logout error", err)
							toast("审核失败！")
						}).finally(() => {
							that.showAuditModal = false
						})
					} else {
						console.log('验证失败');
					}
				}).catch(e => {
					//TODO handle the exception
					console.error("auditForm validate error", e)
				})
			},
			viewIMDetail: function(item) {
				uni.navigateTo({
					url: '/pages/consultant/consultantIM?id=' + item.id
				})
			},
			interpose: function(row) {
				this.current = row
				this.interposeForm = {
					interposeType: '',
					interposeAccount: '',
					interposeName: ''
				}
				this.getAssignLawyers()
				this.showInterpose = true
				this.$nextTick(() => {
					this.$refs.interposeForm.setRules(this.rulesInterposeForm)
				})
			},
			hideK: function() {
				try {
					// 收起键盘
					uni.hideKeyboard()
				} catch (e) {}
			},
			getAssignLawyers: function() {
				this.assignLawyers = []
				this.$api.getAssignLawyers({
					dataSource: this.current.dataSource
				}).then(res => {
					if (res.success) {
						let da = res.result || []
						da.forEach(item => {
							item.subname = '服务中【' + item.inServiceNum + '】件'
						})

						this.assignLawyers = da
					} else {
						toast(res.message)
					}
				}).catch(function(err) {
					console.log('getAssignLawyers error', err)
					toast("获取可指派律师失败！")
				})
			},
			selectClick: function(data) {
				console.log('selectClick', data)
				this.interposeForm.interposeAccount = data.userAccount
				this.interposeForm.interposeName = data.name
			},
			cancelInterpose: function() {
				this.showInterpose = false
			},
			confirmInterpose: function() {
				let that = this
				this.$refs.interposeForm.validate().then(async res => {
					if (res) {
						console.debug("interposeForm valid", res)
						this.interposeForm.groupId = this.current.groupId
						this.$api.interposeConsultant(this.interposeForm).then(res => {
							if (res.success) {
								that.cancelInterpose()
								if (that.interposeForm.interposeType == 'self') {
									this.viewIMDetail(this.current)
								} else {
									toast("指派成功！")
								}
								this.$refs.paging.reload(true);
							} else {
								toast(res.message)
							}
						}).catch(err => {
							console.log("interposeForm error", err)
							toast("指派失败！")
						}).finally(() => {
							that.showAuditModal = false
						})
					} else {
						console.log('验证失败');
					}
				}).catch(e => {
					//TODO handle the exception
					console.error("interposeForm validate error", e)
				})
			},
			reloadList: function() {
				// 接入 获取关闭
				if (this.selectTab.value == 'IM') {
					this.$refs.paging.reload(true);
				}
			},
			receiveMsg: function(message) {
				let map = uni.getStorageSync('newMsgMap') || {}
				this.$set(this.newMsgMap, message.targetId, map[message.targetId] || 0)
				this.$refs.paging.didUpdateVirtualListCell(0)
				console.log('this.newMsgMap', this.newMsgMap)
				// this.$set(this.newMsgMap, message.targetId, this.$refs.globalNotify.newMsgMap[message.targetId] || 0)
			}
		},
		onTabItemTap() {
			console.log('onTabItemTap')
			this.initData()
		},
		onLoad: function(options) {
			let that = this
			this.initData()
			
			uni.$off('refreshIM')
			uni.$off('reloadList')
			uni.$off('listMsg')

			uni.$on('listMsg', function(message) {
				console.log('consultant-listMsg ，携带参数为：' + message);
				that.receiveMsg(message)
			})

			uni.$on('refreshIM', function() {
				console.log('consultant-refreshIM');
				that.getIMList()
			})

			uni.$on('reloadList', function() {
				console.log('consultant-reloadList');
				that.reloadList()
			})
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;

		.orderItemContainer {
			padding: 0 10px 10px 10px;
		}

		.orderItem {
			padding: 10px;
			background: #f9f9f9;
			line-height: 1.6rem;
			border-left: 3px solid #2d8cf0;
			margin-bottom: 10px;
			position: relative;

			.orderBtn {
				width: max-content;
				position: absolute;
				right: 10px;
				top: 8px;
			}
		}


		.headerBtn {
			.ivu-tooltip {
				line-height: 0px;
			}

			.ivu-switch-checked {
				border-color: #00cc66;
				background-color: #00cc66;
			}
		}


		.grabbingBtn {
			position: absolute;
			right: 0;
			bottom: 60px;
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 10px;
			border-radius: 100px 0 0 100px;
			color: #fff;
			background: linear-gradient(180deg, #3666EF 0%, #3397FE 100%);
			box-shadow: 0 2px 2px 0 #2D7BE8;

			// .grabbingBtnContent {
			// 	display: contents;

			// }

		}

		.grabbingBtn::before {
			content: "";
			width: 22px;
			height: 22px;
			background-image: url(/static/images/pointer.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.grabbingBtn::after {
			content: "";
			width: 20px;
			height: 20px;
			background-image: url(/static/images/right.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
</style>